import React, {useEffect, useState} from 'react'
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import {Transfer, Button, Modal, Row, ConfigProvider } from 'antd'
import {connect} from 'umi'
import { getUserMsgRoles, getMsgRolesList } from '../service'

const CreateMsgRoleTransfer = (props) => {
  const {onSubmit, onCancel, current, visible} = props;
  const [userId, setUserId] = useState('');
  const [mockData, setMockData] = useState([]);
  const [targetKeys, setTargetKeys] = useState([]);

  useEffect(() => {
    if (current){
      const targetKeysInit = [];
      const mockDataInit = [];
      setUserId(current.userId);
      getMsgRolesList().then(msgRolesList => {
        getUserMsgRoles(parseInt(current.userId)).then(userMsgRoles => {
          for (let i = 0; i < msgRolesList.length; i++) {
            const data = {
              key: msgRolesList[i].noticeRoleId,
              title: msgRolesList[i].noticeRoleName,
              description: msgRolesList[i].noticeRoleName,
              chosen: false,
            };
            let hasRoleFlag = userMsgRoles.findIndex(item =>{ return  item.noticeRoleId === msgRolesList[i].noticeRoleId});
            if (hasRoleFlag !== -1){
              data.chosen = true;
              targetKeysInit.push(data.key);
            }
            mockDataInit.push(data);
          }
          setMockData(mockDataInit);
          setTargetKeys(targetKeysInit);
        });
      });
    }
  }, [current]);

  const filterOption = (inputValue, option) => option.description.indexOf(inputValue.toLowerCase()) > -1;

  const handleChange = (targetKeys) => {
    setTargetKeys(targetKeys);
  };

  const handleSearch = (dir, value) => {
  };

  const onFormCancel = () => {
    onCancel();
  };

  const handleSubmit = async () => {
    let roleIdList = [];
    targetKeys.forEach(item => {
      roleIdList.push(item)
    });
    onSubmit({roleId: roleIdList, userId: userId, flag: 'updateUserMsgRole'});
  };

  const renderFooter = () => {
    return (
      <>
        <Button type="primary" onClick={() => handleSubmit()}>保存</Button>
        <Button onClick={() => onFormCancel()}>关闭页面</Button>
      </>
    )
  };

  return (
    <Modal
      width={1000}
      destroyOnClose
      title='分配消息角色'
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
    <Row justify='center'>
      <ConfigProvider locale={zh_CN}>
        <Transfer
          dataSource={mockData}
          showSearch
          titles={['未分配消息角色','已分配消息角色']}
          filterOption={filterOption}
          targetKeys={targetKeys}
          listStyle={{
            width: 300,
            height: 600,
          }}
          onChange={handleChange}
          onSearch={handleSearch}
          render={item => item.title}
        />
      </ConfigProvider>
    </Row>


    </Modal>
  )
};


export default connect(() => ({

}))(CreateMsgRoleTransfer)
